<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <script src="ele-2.15.7/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <title></title>
  <link rel="shortcut icon" type="image/x-icon" href="images/ThreeGayslogo.png"/>
  <link rel="stylesheet" type="text/css" href="css/index-z.css" />
  <link rel="stylesheet" type="text/css" href="css/shop.css" />
  <!--跑马灯标题-->
  <script type="text/javascript">
    var str="ThreeGays(中国)-官方网站 (欢迎你)"; // title
    // 跑马灯标题
    function run(){
      str=str.substring(1,str.length)+str.substring(0,1);
      document.title=str;  // 在标题栏显示
      window.status=str;  // 在状态栏显示
      //setTimeout(run,300);
    }
    //run();
    window.setInterval("run()",300); //每隔0.3每分钟调用run()方法一次
  </script>
</head>
<body>
<!--主页面-->
<div id="app">
  <!--    固定的menu-->
  <div id="header" class="head-one">
    <a class="logoname" href="index.html">ThreeGays</a>
    <a href="Personal_homepage/Personal.html">
      <i  class="el-icon-user"
          style="margin-right: 20px;"></i>
    </a>
    <a href="shoppingcart.html" title="我的购物车"><i  class="el-icon-shopping-cart-1"></i></a>
    <!--        <div style=""></div>-->
    <i class="el-icon-search" @click="show0 =!show0,show00=false"></i>
    <transition name="el-zoom-in-center">
      <div class="search"
           @click="show0=true,show00=!show00" v-show="show0">
<!--        <input onkeydown="keyup_submit(event);" type="text" class="search-ipt" placeholder="探索新世界"/>-->
        <el-autocomplete
                popper-class="my-autocomplete"
                v-model="state"
                type="text"
                style=""
                size="mini"
                :fetch-suggestions="querySearch"
                placeholder="                                探索新世界"
                @select="handleSelect"
                v-focus
                @keyup.enter.native="search()">
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="addr">{{ item.address }}</span>
          </template>
        </el-autocomplete>
      </div>
    </transition>
  </div>
  <!--    顶部底色-->
  <div class="top"></div>
  <!--    搜索menu-->
  <transition name="el-zoom-in-top">
    <div v-show="show00" class="searchdiv">
      <ul class="search-ul1">
        <li><b>品牌：</b></li>
        <li>
          <el-radio-group v-model="radio1" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="" >全部</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio1" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="HUAWEI" >HUAWEI</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio1" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="SONY">SONY</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio1" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="Apple">Apple</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio1" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="Xiaomi">XIAOMI</el-radio-button>
          </el-radio-group>
        </li>
      </ul>
      <br>
      <ul class="search-ul2">
        <li><b>类型：</b></li>
        <li>
          <el-radio-group v-model="radio2" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="" >全部</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio2" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="phone">手机</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio2" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="computer">电脑</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio2" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="earpod">耳机</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio2" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="other">配件</el-radio-button>
          </el-radio-group>
        </li>
      </ul>
      <br>
      <ul class="search-ul2">
        <li><b>排序：</b></li>
        <li>
          <el-radio-group v-model="radio3" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="" @input="squery()">综合</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio3" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="asc">价格低到高</el-radio-button>
          </el-radio-group>
        </li>
        <li>
          <el-radio-group v-model="radio3" size="mini" fill="black" @input="squery()" text-color="white">
            <el-radio-button label="desc">价格高到低</el-radio-button>
          </el-radio-group>
        </li>
      </ul>
    </div>
  </transition>
  <div class="All">
    <div class="shopt">
      <b>欢迎光顾，</b><a>追求高品质，</a><br>
      <a>打造新体验。</a>
    </div>
<!--  <div class="sw">-->
<!--    <span>马上开始探索</span><br>-->
<!--    <el-switch-->
<!--          active-color="#13ce66"-->
<!--          v-model="swvalue"-->
<!--          active-text="开启">-->
<!--    </el-switch>-->
<!--  </div>-->
    <!--      评价-->
    <div class="pf">
      <a style="cursor: pointer"><i  class="el-icon-chat-square" style="color: #828282"></i>联系我们</a><br>
      <a><i  class="el-icon-edit-outline" style="color: #828282"></i>为我们打分</a>
      <el-rate
              v-model="pfvalue"
              allow-half
              show-text
              high-threshold="4.5"
              text-color="#828282"
              :colors="['black','#99A9BF','#3a8ee6']">
      </el-rate>
      <el-button style=" margin-top: 5px;" icon="el-icon-check" @click="open1"type="success" size="mini" circle>
      </el-button>
      <el-button style=" margin-top: 5px;" icon="el-icon-s-home" @click="" size="mini" type="warning" circle>
      </el-button>
      <el-button style=" margin-top: 5px;" icon="el-icon-s-custom" size="mini" type="danger" circle>
      </el-button>
    </div>



    <!--商品详情-->
    <dialog id="phonedialog" >
      <!-- 商品界面购买内部dialog  -->
      <dialog id="buyDialog">
        <div class="dbutton">
          <el-button type="danger" @click="closeBuyDialog()" icon="el-icon-close" size="small" circle></el-button>
        </div>
        <div class="content">
          <a>{{dgoods.company}}</a><br>
          <img :src="path + dgoods.image"><br>
          <span style="font-size: 10px; margin-left: 90px; line-height: 50px; color: #6e6e73; float: left">*本产品支持3个月保修</span>
          <div class="dialoginfo" >
            <span style="font-size: 10px; color: #d99368; float: left">全新</span><br>
            <span class="dialogGoodsname">{{dgoods.goodsname}}</span><br>
            <a class="ddp">价格: {{dgoods.price}} 元</a><br>
            <div style="width: 300px;">
              <i class="el-icon-user-solid" ></i>
              <span class="hint">收货人：<span id="conp" class="ddinfo"></span></span>
              <input @change="showitem()" v-model="conname" placeholder="请输入收货人姓名" type="text" class="inputItem"><br>
              <i class="el-icon-phone" ></i>
              <span class="hint">电话号码：<span id="cont" class="ddinfo"></span></span>
              <input @change="showitem()" v-model="contelphone" placeholder="请输入电话号码" type="text" class="inputItem"><br>
              <i class="el-icon-s-promotion" ></i>
              <span class="hint">收货地址：<span id="cona" class="ddinfo"></span></span>
<!--              <input @change="showitem()" v-model="conaddress" placeholder="            请输入收货地址" type="text" class="inputItem"><br>-->
              <select v-model="add_province" id="province" class='province' msgEmpty="请选择省份" style="border-radius: 18px;height: 24px;border: none;color: #6e6e73;background-color: #f5f5f7;color: #3e3e40;text-align: center;">
                <option value=""  >   请选择</option>
              </select>&nbsp;&nbsp;&nbsp;
              <select v-model="add_city" id="city" class='city' msgEmpty="请选择城市" style="border-radius: 18px;height: 24px;border: none;color: #6e6e73;background-color: #f5f5f7;color: #3e3e40;width: 100px;text-align: center;">
                <option value="">   请选择</option>
              </select>&nbsp;&nbsp;&nbsp;
              <input type="text" id="site"v-model="add_site" placeholder="请填写详细地址" style="margin-top: 15px; border-radius: 18px;height: 24px;border: none;color: #6e6e73;background-color: #f5f5f7;color: #3e3e40;width: 210px;vertical-align:middle;text-align: center;"><br/>
              <el-radio v-model="radio" label="1" style="margin-right: 25px;margin-top: 10px"><span style="">微信支付</span></el-radio>
              <el-radio v-model="radio" label="2"><span style="">支付宝支付</span></el-radio>
            </div>
            <el-button style="margin-top: 20px;margin-left: -70px" @click="showErweimaDialog()" type="success" icon="el-icon-sold-out" round>立即支付</el-button>
          </div>
        </div>
      </dialog>
<!--      -------------------    -->
      <dialog id="erweimaDialog">
        <div class="dbutton">
          <el-button type="danger" @click="closeErweimaDialog(dgoods)" icon="el-icon-close" size="small" circle></el-button>
        </div>
        <div class="content">
          <div style="text-align: center;margin-top: 50px;">
            <img :src="erweima" style="margin-left: 0px;width: 200px;height: 200px">
          </div>
        </div>
      </dialog>
<!--  ----------------    -->
      <div class="dbutton">
        <el-button type="danger" @click="closedialog()" icon="el-icon-close" size="small" circle></el-button>
      </div>
      <div class="content" >
        <a>{{dgoods.company}}</a><br>
        <img :src="path + dgoods.image"><br>
        <span style="font-size: 10px; margin-left: 90px; line-height: 50px; color: #6e6e73; float: left">*本产品支持3个月保修</span>
        <div class="dialoginfo" >
          <span style="font-size: 10px; color: #d99368; float: left">全新</span><br>
          <span class="dialogGoodsname">{{dgoods.goodsname}}</span><br>
          <span class="dialogGoodsprice">RMB {{dgoods.price}} 起</span>
          <div>
            <i class="el-icon-guide" ></i><a>{{dgoods.t1}}</a><br>
            <i class="el-icon-cpu" ></i><a>{{dgoods.t2}}</a><br>
            <i class="el-icon-news" ></i><a>{{dgoods.t3}}</a><br>
          </div>
          <el-button style="margin-top: 30px" @click="showBuyDialog(dgoods.goodsname)" type="success" icon="el-icon-sold-out" round>立即抢购</el-button>
          <div style="display: inline-block;width: 100px">
            <div style="width: 150px">
              <el-button icon="el-icon-shopping-cart-1" type="warning" @click="cart($event,dgoods)" circle></el-button>
            </div>
            <div style="display: none;width: 150px" id="cartdialog">
              <el-button style=" margin-top: 5px;" icon="el-icon-minus" type="success" @click="changeAmount($event,'-',dgoods)" circle></el-button>
              <input class="shoppingCart1" maxlength="1" max="5" v-model="dgoods.amount" type="text" @click="addCart(dgoods)">
              <el-button style=" margin-top: 5px;" icon="el-icon-plus" type="primary" @click="changeAmount($event,'+',dgoods)" circle></el-button>
            </div>
          </div>
        </div>
      </div>
    </dialog>
<!--    条件查询结果-->
    <div style="margin-left: 200px;">
      <div style="margin-left: -50px" v-for="items, index in Sgoods">
        <div class="searchgoods">
          <img :src="path + items.image" @click="showdialog(items.goodsname)"><br>
          <span>{{items.goodsname}}</span>
        </div>
      </div>
    </div>
<!-- 条件查询结果特色分页条-->
    <div class="fyt">
      <i  class="el-icon-back" @click="decrease"></i>
    <div style="width: 500px; float: left; margin-left: 20px">
      <el-progress :percentage="percentage" :color="colors"></el-progress>
    </div>
      <i  class="el-icon-right" @click="increase"></i>
    </div>

    <!-- 手机栏目简介-->
    <div class="phoneif" id="tel">
      <a name="telphone"></a>
      <b class="if-b">选购手机，</b><a class="if-a" >总有一台适合你。</a>
      <div class="sw">
        <el-switch
            active-color="#13ce66"
            v-model="swvalue"
            active-text="开启">
          </el-switch>
      </div>
    </div>
    <div style="margin-left: 130px; margin-top: 20px;">
      <div class="cards" v-for="items, index in pgoods">
        <el-card style = "border-radius: 18px" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="cardif">
            <a>{{items.goodsname}}</a><br>
            <b>{{items.goodsinfo}}</b>
          </div>
          <img @click="showdialog(items.goodsname)" :src="path + items.image" class="cardimage">
          <span class="cardprice">RMB<a style="color: black; font-size: 16px"> {{items.price}} </a>起</span>

          <div class="cardbottom">
            <div>
              <el-button style=" margin-top: 5px;" icon="el-icon-shopping-bag-2"type="success" size="mini" @click="showBuyDialog(items.goodsname)" circle>
              </el-button>
              <el-button style=" margin-top: 5px;" icon="el-icon-shopping-cart-1"type="primary" size="mini" @click="cart($event,items)" circle>
              </el-button>
            </div>
            <div style="display: none">
              <el-button style=" margin-top: 5px;" icon="el-icon-minus" type="success" size="mini"@click="changeAmount($event,'-',items)" circle></el-button>
              <input maxlength="1" class="shoppingCart" v-model="items.amount" type="text" @click="addCart(items)" size="mini" style="width: 45px">
              <el-button style=" margin-top: 5px;" icon="el-icon-plus" type="primary" size="mini"@click="changeAmount($event,'+',items)" circle></el-button>
            </div>
          </div>
<!--          <div style="margin-top: 10px; float: right; margin-right: 10px">-->
<!--            <el-switch-->
<!--                    active-color="#13ce66"-->
<!--                    v-model="swvalue">-->
<!--            </el-switch>-->
<!--          </div>-->
        </el-card>
      </div>
    </div>
<!--特色手机分页条-->
    <div class="block">
      <el-slider
              v-model="phonepage"
              vertical
              :max="Allphonepage"
              height="200px"
              @Change="query()"
              :show-tooltip="false">
      </el-slider>
    </div>

<!--电脑栏目简介-->
    <div class="comif" id="computer"><b class="if-b">精选电脑，</b><a class="if-a">性能超越想象。</a></div>
    <div style="margin-left: 130px">
      <div class="cards" v-for="items, index in cgoods">
        <el-card style = "border-radius: 18px" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="cardif">
            <a >{{items.goodsname}}</a><br>
            <b>{{items.goodsinfo}}</b>
          </div>
          <img @click="showdialog(items.goodsname)" :src="path + items.image"  class="cardimage">
          <span class="cardprice">RMB<a style="color: black; font-size: 16px"> {{items.price}} </a>起</span>
          <div class="cardbottom">
            <div>
              <el-button style=" margin-top: 5px;" icon="el-icon-shopping-bag-2"type="success" @click="showBuyDialog(items.goodsname)" size="mini"  circle>
              </el-button>
              <el-button style=" margin-top: 5px;" icon="el-icon-shopping-cart-1"type="primary" size="mini" @click="cart($event,items)" circle>
              </el-button>
            </div>
            <div style="display: none">
              <el-button style=" margin-top: 5px;" icon="el-icon-minus" type="success" size="mini"@click="changeAmount($event,'-',items)" circle></el-button>
              <input maxlength="1" class="shoppingCart" v-model="items.amount" type="text" @click="addCart(items)" size="mini" style="width: 45px">
              <el-button style=" margin-top: 5px;" icon="el-icon-plus" type="primary" size="mini"@click="changeAmount($event,'+',items)" circle></el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
<!--特色电脑分页条-->
    <div class="block">
      <el-slider
              v-model="compage"
              vertical
              :max="Allcompage"
              height="200px"
              @Change="query()"
              :show-tooltip="false">
      </el-slider>
    </div>

<!--耳机栏目介绍-->
      <div class="earif" id="ear"><b class="if-b">优质耳机，</b><a class="if-a">让你享受极致畅听。</a></div>
      <div style="margin-left: 130px">
        <div class="cards"  v-for="items, index in egoods">
          <el-card style = "border-radius: 18px" :body-style="{ padding: '0px' }" shadow="hover">
            <div class="cardif">
              <a >{{items.goodsname}}</a><br>
              <b>{{items.goodsinfo}}</b>
            </div>
            <img @click="showdialog(items.goodsname)" :src="path + items.image" class="cardimage">
            <span class="cardprice">RMB<a style="color: black; font-size: 16px"> {{items.price}} </a>起</span>
            <div class="cardbottom">
              <div>
                <el-button style=" margin-top: 5px;" icon="el-icon-shopping-bag-2"type="success" size="mini" @click="showBuyDialog(items.goodsname)" circle>
                </el-button>
                <el-button style=" margin-top: 5px;" icon="el-icon-shopping-cart-1"type="primary" size="mini" @click="cart($event,items)" circle>
                </el-button>
              </div>
              <div style="display: none">
                <el-button style=" margin-top: 5px;" icon="el-icon-minus" type="success" size="mini" @click="changeAmount($event,'-',items)" circle></el-button>
                <input maxlength="1" class="shoppingCart" v-model="items.amount" type="text" @click="addCart(items)" size="mini" style="width: 45px">
                <el-button style=" margin-top: 5px;" icon="el-icon-plus" type="primary" size="mini" @click="changeAmount($event,'+',items)" circle></el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
<!--特色耳机分页条-->
      <div class="block">
        <el-slider
                v-model="earpage"
                vertical
                :max="Allearpage"
                height="200px"
                @Change="query()"
                :show-tooltip="false">
        </el-slider>
    </div>

<!--配件栏目介绍-->
    <div class="earif" id="pen"><b class="if-b">配件任选，</b><a class="if-a">助你事半功倍。</a></div>

    <div style="margin-left: 130px">
      <div class="cards" v-for="items, index in ogoods">
        <el-card style = "border-radius: 18px" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="cardif">
            <a >{{items.goodsname}}</a><br>
            <b>{{items.goodsinfo}}</b>
          </div>
          <img @click="showdialog(items.goodsname)" :src="path + items.image" class="cardimage">
          <span class="cardprice">RMB<a style="color: black; font-size: 16px"> {{items.price}} </a>起</span>
          <div class="cardbottom">
            <div>
              <el-button style=" margin-top: 5px;" icon="el-icon-shopping-bag-2"type="success" size="mini" @click="showBuyDialog(items.goodsname)" circle>
              </el-button>
              <el-button style=" margin-top: 5px;" icon="el-icon-shopping-cart-1"type="primary" size="mini" @click="cart($event,items)" circle>
              </el-button>
            </div>
            <div style="display: none">
              <el-button style=" margin-top: 5px;" icon="el-icon-minus" type="success" size="mini"@click="changeAmount($event,'-',items)" circle></el-button>
              <input maxlength="1" class="shoppingCart" v-model="items.amount" type="text" @click="addCart(items)" size="mini" style="width: 45px">
              <el-button style=" margin-top: 5px;" icon="el-icon-plus" type="primary" size="mini"@click="changeAmount($event,'+',items)" circle></el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>

<!--特色配件分页条-->
    <div class="block">
      <el-slider
              v-model="otherpage"
              vertical
              :max="Allotherpage"
              height="200px"
              @Change="query()"
              :show-tooltip="false">
      </el-slider>
    </div>


  </div>
<!--footer-->
  <div class="footer">
    <div class="footinfo1">
      <p>1.网站简介：ThreeGays一个专注于电子设备的高质量平台，只为给您提供更加舒适便捷优质的服务，ThreeGays祝您购物愉快。2.关于网站：此网站由ThreeGays赞助 由Team ThreeGays制作 此网站仅供学习使用 严禁私自转发商用 一经发现后果自负。</p>
      <p>3.关于购物：用户可在商店界面进行购物，商品出现任何问题可以咨询网站客服，由于本商店售卖商品的特殊性，因此任何商品均不支持7天无理由退款。但本商店支持保修服务，产品保修一般为3个月，注意不同产品可能存在保修期限不同，请用户注意</p>
      <p>留意商品界面的详细信息再进行购买。4.加入ThreeGays:ThreeGays仍处于试验阶段，若你想要加入我们请联系我们，我们会在七个礼拜日内与您取得联系，Team ThreeGays欢迎你的加入。5.声明：ThreeGays仅此一个网站，其他均为假冒，谨防上当受骗。</p>
    </div>
    <div class="footinfo">
      <p class="about">
        <a href="">关于我们</a>|
        <a href="">商务合作</a>|
        <a href="">投诉指引</a>|
        <a href="">购物协议</a>|
        <a href="">个人隐私政策</a>|
        <a href="">用户服务协议</a>|
        <a href="">ThreeGays制作人协议</a>|
        <a href="">商家入驻协议</a>|
        <a href="">联系我们</a>|
        <a href="">HELP</a>
      </p>
      <p>
        <a href="http://www.12377.cn">违法和不良信息举报：www.12377.cn</a> 举报电话：12377
        <a href="https://jbts.mct.gov.cn/">12318全国文化市场举报网站</a></p>
      <p>Copyright (C) 2004-2022 ThreeGays.All Rights Reserved</p>
    </div>
  </div>
</div>
<!--js-->
<script type="text/javascript">
  function index(){
    location.href="index.html";
  }
  function keyup_submit(e){
    var evt = window.event || e;
    if (evt.keyCode == 13){
      //回车事件
      console.log("搜索");
      t = document.getElementsByClassName("search-ipt").value;
      console.log(t);
      search();
    }
  }
</script>
<!--vue-->
<script>

  Vue.directive('focus', {
    inserted(el){
      el.focus();
    }
  })
  var v = new Vue({
    el : "#app",
    data : {
      show00 : false,
      show0: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      radio1: '',
      radio2: '',
      radio3: '',
      pfvalue: null,
      swvalue: false,
      egoods:{},
      pgoods:{},
      cgoods:{},
      ogoods:{},
      Sgoods:{},
      dgoods:{},
      phonepage: 0,
      earpage: 0,
      compage: 0,
      otherpage: 0,
      Allearpage:10,
      Allcompage:10,
      Allotherpage:10,
      Allphonepage:10,
      Allspage: 0,
      amount: 1,
      spage: 1,
      percentage: 10,
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      restaurants: [],
      state: '',
      path: location.pathname.substring(0,location.pathname.lastIndexOf("/") + 1),
      conname: "",
      contelphone: "",
      // conaddress: "",
      radio: 0,
      erweima: "",
      add_province:'',
      add_city:'',
      add_site:'',
    },
    created(){
      this.query()// 执行查询
      this.squery()
      //this.listener()// 执行事件监听
      console.log(this.path)

    },
    methods: {
    //   // 事件监听
    //   listener(){
    //     var pd=document.getElementById('phonedialog')
    //     // 监听点击dialo的各个事件
    //     pd=addEventListener('click', ev => {
    //       console.log(ev.target)
    //       //if (ev.target.nodeName === 'DIALOG') this.close() // 点击空白关闭窗口
    //     })
    //     // pd=addEventListener('click', function (ev) {
    //     //   if (ev.target.nodeName === 'DIALOG') this.close()
    //     // })
    //   },
      // 评分提示
      open1() {
        const h = this.$createElement;
        this.$notify({
          duration:'2000',
          title: '评分成功',
          message: '感谢你的打分，我们会继续努力的！',
          type: 'success'
        });
      },
      increase() {
        this.percentage += parseInt((1/this.allspage) * 100);
        this.spage += 1;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
        if (this.spage >this.Allspage){
          this.spage = this.Allspage;
        }
        this.squery()
      },
      decrease() {
        this.percentage -= parseInt((1/this.allspage) * 100);
        this.spage -= 1;
        if (this.percentage < parseInt((1/this.allspage) * 100)) {
          this.percentage = parseInt((1/this.allspage) * 100);
        }
        if (this.spage < 1){
          this.spage = 1;
        }
        this.squery()
      },
      // 打开商品详情
      showdialog(goodsname){
        // 打开详情dialog
        var pd=document.getElementById('phonedialog')
        pd.showModal('已打开dialog')
        console.log(pd.returnValue)// 打印事件结果（返回值
        this.dialogquery(goodsname)
      },
      // 关闭商品详情
      closedialog(){
       // 关闭详情dialog
        var pd=document.getElementById('phonedialog');
        var cd = document.getElementById('cartdialog');
        cd.style.display = 'none';
        cd.previousElementSibling.style.display = 'block'
        pd.close('已关闭dialog')
        console.log(pd.returnValue)// 打印事件结果（返回值

      },
       // 关闭商品购买
       showBuyDialog(goodsname){
         //获取用户默认地址
         axios.get("QueryUserAddressServlet.s").then(res=>{
           console.log(res.data);
           if (res.data.data != null){
             this.conname = res.data.data.name;
             this.contelphone = res.data.data.telphone;
             // if (res.data.data.site.length > 0) {
             //   console.log(res.data.data)
             //   var reg = /.+?(省|市|自治区|自治州|县|区)/g;
             //   var site = res.data.data.site.match(reg);
             //   this.add_province = site[0];
             //   this.add_city = site[1];
             //   console.log(this.add_province)
             //   for (let i = 2; i < site.length; i++) {
             //     this.add_site += site[i]
             //   }
             // }
           }

         })

         // 打开详情dialog
         var bd=document.getElementById('buyDialog')
         bd.showModal('已打开dialog')
         axios.get("CommitCartServlet.s").then(res=>{
           if (res.data.msg == "用户未登录"){
             location.href = res.data.data;
           }
         })
         this.dialogquery(goodsname)
         this.closedialog();
       },
       closeBuyDialog(){
        var bd = document.getElementById('buyDialog');
        bd.close('已关闭dialog');
       },
       showitem(){
         var conp = document.getElementById('conp');
         var cont = document.getElementById('cont');
         var cona = document.getElementById('cona');
         var flag = true;
         if (this.conname == ""){
           conp.style.display = "inline-block";
           conp.innerText = "收货人？"
           flag = false;
         }else {
           conp.style.display = "none";
           conp.innerText = ""
         }


         if (this.contelphone.length != 11){
           console.log(this.contelphone.length)
           cont.style.display = "inline-block";
           cont.innerText = "电话须为11位。";
           this.$forceUpdate()
           flag = false;
         }else {
           cont.style.display = "none";
           cont.innerText = ""
         }
         console.log(this.add_province)
         if (this.add_province == ""){
           cona.style.display = "inline-block";
           cona.innerText = "请选择省份。";
           flag = false;
           return flag;
         }else {
           cona.style.display = "none";
           cona.innerText = "";
         }
         if (this.add_city == ""){
           cona.style.display = "inline-block";
           cona.innerText = "请选择市区。";
           flag = false;
           return flag;
         }else {
           cona.style.display = "none";
           cona.innerText = "";
         }
         if (this.add_site == ""){
           cona.style.display = "inline-block";
           cona.innerText = "请输入详细地址。";
           flag = false;
           return flag;
         }else {
           cona.style.display = "none";
           cona.innerText = "";
         }
         return flag;
       },
       showErweimaDialog(goodsname){

       if (this.showitem() == false){
         return;
       }

         // 打开详情dialog
         if(this.radio == 0){
           this.$message("请选择支付方式");
           return;
         }
         if (this.radio == 1){
           this.erweima = "images/wechat.png";
         }else {
           this.erweima = "images/zfb.png";
         }
         this.radio = 0;
         var ed=document.getElementById('erweimaDialog');
         ed.showModal('已打开dialog');
         this.closeBuyDialog();
       },
       closeErweimaDialog(dgoods){
         console.log(this.contelphone)
         var ed = document.getElementById('erweimaDialog');
         ed.close('已关闭dialog');
         var params = new URLSearchParams();
         params.append("name", this.conname);
         params.append("telphone", this.contelphone);
         params.append("address", this.add_province + this.add_city + this.add_site);
         params.append("product", dgoods.goodsname);
         params.append("amount", 1);
         params.append("method", this.radio);
         params.append("total", dgoods.price);
         params.append("buy","true");

         axios.post("CommitCartServlet.s",params).then(res=>{
           this.$message(res.data.msg);
         })
         this.conname = "";
         this.add_province = "";
         this.add_city = "";
         this.add_site = "";
         this.conaddress = "";
       },
       // 商品详情信息显示
      dialogquery(goodsname){
        axios.get(".." + this.path + "ShopdialogServlet.s",{
          params : {
            goodsname: goodsname
          }
        }).then(res=>{
          console.log(goodsname);
          console.log(res.data.data);
          res.data.data.amount = 1;
          this.dgoods = res.data.data;
        })
      },
       // 搜索框模糊搜索
       search(){
         console.log(this.state);// 打印输入框的值
         axios.get("ShopSearchServlet.s",{
           params : {
             text: this.state // 输入框的值
           }
         }).then(res=>{
           console.log(res.data.data);
           this.Sgoods = res.data.data;
         })
       },
       // 搜索menu的条件查询
      squery(){
        axios.get(".." + this.path + "SearchqueryServlet.s",{
          params : {
            spage: this.spage,// 查询的页数
            company: this.radio1,// 公司名
            type: this.radio2,
            order: this.radio3,
          }
        }).then(res=>{
          // console.log(this.radio1);
          // console.log(this.radio2);//打印查询传入的的type值
          // console.log(this.radio3);
          // console.log(res.data.data.sdata);
          // console.log(res.data.data.stotal);
          this.Sgoods = res.data.data.sdata;
          //this.Sgoods.forEach(e=>e.amount=1);
          if (res.data.data.stotal % 8 !==0){
            // 一页8行数据 不能被8整除
            this.Allspage = parseInt(res.data.data.stotal / 8 ) + 1 ; // 计算总共的页数
            this.percentage = parseInt((this.spage/this.Allspage) * 100) // 将页数转换成百分比
          }else {
            // 能被4整除
            this.Allspage = parseInt(res.data.data.stotal / 8 );
            this.percentage = parseInt((this.spage/this.Allspage) * 100) // 将页数转换成百分比
          }
        })
      },
      // 查询card内容
      query(){
        axios.get(".." + this.path + "QueryShopServlet.s",{
          params : {
            phonepage: this.phonepage + 1,// 将手机卡片的初始页数传过去 由于初始为0 所以要查第一页需加 1
            compage : this.compage + 1,
            earpage: this.earpage + 1,
            otherpage: this.otherpage + 1,
          }
        }).then(res=>{
          //////////////手机查询
          console.log(res.data.data.pdata.phonedata);// 控制台打印单页手机数据
          console.log(res.data.data.pdata.phonetotal);// 控制台打印查到手机数据的总行数
          this.pgoods = res.data.data.pdata.phonedata;// 将手机数据存到数组goods里用于显示
          this.pgoods.forEach(e=>e.amount=1);
          // 计算手机的总页数
          if (res.data.data.pdata.phonetotal % 4 !==0){
            // 一页4行数据 不能被4整除
            this.Allphonepage=parseInt(res.data.data.pdata.phonetotal / 4 ) ;
          }else {
            // 能被4整除
            this.Allphonepage=parseInt(res.data.data.pdata.phonetotal / 4) - 1;
          }
          console.log(this.Allphonepage);// 打印下手机的总页数
          ///////////////电脑查询
          console.log(res.data.data.cdata.comdata);// 控制台打印单页电脑数据
          console.log(res.data.data.cdata.comtotal);// 控制台打印查到电脑数据的总行数
          this.cgoods = res.data.data.cdata.comdata;// 将电脑数据存到数组goods里用于显示
          this.cgoods.forEach(e=>e.amount=1);
          // 计算电脑的总页数
          if (res.data.data.cdata.comtotal % 4 !==0){
            // 一页4行数据 不能被4整除
            this.Allcompage=parseInt(res.data.data.cdata.comtotal / 4 ) ;
          }else {
            // 能被4整除
            this.Allcompage=parseInt(res.data.data.cdata.comtotal / 4) - 1;
          }
          console.log(this.Allcompage);// 打印下电脑的总页数
          //////////////耳机查询
          console.log(res.data.data.edata.eardata);// 控制台打印单页耳机数据
          console.log(res.data.data.edata.eartotal);// 控制台打印查到耳机数据的总行数
          this.egoods = res.data.data.edata.eardata;// 将耳机数据存到数组goods里用于显示
          this.egoods.forEach(e=>e.amount=1);       // 添加商品数量
          // 计算耳机的总页数
          if (res.data.data.edata.eartotal % 4 !==0){
            // 一页4行数据 不能被4整除
            if (res.data.data.edata.eartotal / 4 == 0){
              this.Allearpage=1;
            }else {
              this.Allearpage=parseInt(res.data.data.edata.eartotal / 4 );
            }
          }else {
            // 能被4整除
            if(res.data.data.edata.eartotal / 4 ==1){
              this.Allearpage=0;
            }else{
              this.Allearpage=parseInt(res.data.data.edata.eartotal / 4)-1;
            }
          }
          console.log(this.Allearpage);// 打印下耳机的总页数
          //////////////配件查询
          console.log(res.data.data.odata.otherdata);// 控制台打印单页配件数据
          console.log(res.data.data.odata.othertotal);// 控制台打印查到配件数据的总行数
          this.ogoods = res.data.data.odata.otherdata;// 将配件数据存到数组goods里用于显示
          this.ogoods.forEach(e=>e.amount=1);
          // 计算配件的总页数
          if (res.data.data.odata.othertotal % 4 !==0){
            // 一页4行数据 不能被4整除
            if (res.data.data.odata.othertotal / 4 == 0){
              this.Allotherpage=1;
            }else {
              this.Allotherpage=parseInt(res.data.data.odata.othertotal / 4 );
            }
          }else {
            // 能被4整除
            if (res.data.data.odata.othertotal / 4 == 1) {
              this.Allotherpage = 1;
            } else {
              this.Allotherpage = parseInt(res.data.data.odata.othertotal / 4) - 1;
            }
          }
          console.log(this.Allotherpage);// 打印下配件的总页数
        })

      },
      // 条件查询1
      look() {
        // query(type){
        //   axios.get("../PhoneShop_war_exploded/QueryShopServlet.s",{
        //     params : {
        //       type : type,// 将查询的类型通过get带给servlet
        //       phonepage: this.phonepage + 1,// 将手机卡片的初始页数传过去 由于初始为0 所以要查第一页需加 1
        //       compage: this.compage + 1
        //     }
        //   }).then(res=>{
        //     console.log(res.data.data.phonedata);// 控制台打印单页手机数据
        //     console.log(res.data.data.comdata);// 控制台打印单页电脑数据
        //     console.log(res.data.data.comtotal);// 控制台打印查到电脑数据的总行数
        //     console.log(res.data.data.phonetotal);// 控制台打印查到手机数据的总行数
        //     this.pgoods = res.data.data.phonedata;// 将手机数据存到数组goods里用于显示
        //     this.cgoods = res.data.data.comdata;
        //     // 计算手机和电脑的总页数
        //     if (res.data.data.phonetotal % 4 !==0 || res.data.data.comtotal % 4 !==0 ){
        //       // 一页4行数据 不能被4整除
        //       this.Allcompage=parseInt(res.data.data.comtotal / 4 ) + 1;
        //       this.Allphonepage=parseInt(res.data.data.phonetotal / 4 ) ;
        //     }else {
        //       // 能被4整除
        //       this.Allcompage=parseInt(res.data.data.comtotal / 4);
        //       this.Allphonepage=parseInt(res.data.data.phonetotal / 4) - 1;
        //     }
        //     console.log(this.Allphonepage);// 打印下手机的总页数
        //     console.log(this.Allcompage);// 打印下电脑的总页数
        //   })
        // }
      },
      // 购物车
      cart(e,items){
        this.addCart(items);
        e.currentTarget.parentElement.style.display = "none";
        e.currentTarget.parentElement.nextElementSibling.style.display = "block";
      },
      // 改变数量
      changeAmount(e,flag,items){
        items.amount = parseInt(items.amount);
        if (items.amount < 9 && flag == "+"){
          items.amount++;
        }
        if (items.amount > 0 && flag == "-"){
          items.amount--;
        }
        if(items.amount == 0){
          e.currentTarget.parentElement.style.display = "none";
          e.currentTarget.parentElement.previousElementSibling.style.display = "block"
        }
        this.addCart(items);
      },
      // 加入购物车
      addCart(items){
        this.$forceUpdate();
        if (items.amount != 0){
          console.log(items.amount)
          axios.get("CreateCartServlet.s",{
            params: {
              product : items.goodsname,
              amount : items.amount
            }
          }).then(res=>{
            if (res.data.code == 0){
              if (res.data.msg == "用户未登录"){
                location.href = res.data.data;
              }
            }
          })
        }
      },
       // 搜索框辅助1
       querySearch(queryString, cb) {
         var restaurants = this.restaurants;
         var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
         // 调用 callback 返回建议列表的数据
         cb(results);
       },
       createFilter(queryString) {
         return (restaurant) => {
           return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       // 搜索框辅助2
       loadAll() {
         return [
           { "value": "iPhone14 Pro", "address": "灵动岛，强力出圈" },
           { "value": "Xiaomi13", "address": "全新小米，国产之光" },
           { "value": "HUAWEI MATE X4", "address": "华为旗舰，折叠才酷炫" },
           { "value": "HUAWEI P60 Art", "address": "高像素，打造艺术品" },
           { "value": "Alienware m18", "address": "外星科技，地表最强" },
           { "value": "MacBook Pro", "address": "未来设计，办公天花板" },
           { "value": "iPhone14", "address": "苹果新品，巅峰之作" },
           { "value": "WH-1000XM5", "address": "超级降噪，静无止境" },
           { "value": "AirPods Pro", "address": "不被定义，重塑新声" },
         ];
       },
       handleSelect(item) {
         console.log(item);
       },
       handleIconClick(ev) {
         console.log(ev);
       }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  })
</script>
<script>
  var pro = ["山东", "天津", "吉林", "黑龙江", "江苏", "福建", "湖北", "湖南", "宁夏", "山西", "辽宁", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "内蒙古", "广西", "西藏", "新疆维吾尔", "北京", "上海", "重庆", "广东", "河北", "浙江", "安徽", "江西", "河南", "海南", "香港", "澳门", "台湾"];

  var city = {
    北京: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "海淀区", "丰台区", "石景山区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "门头沟区", "密云县", "延庆县"],
    天津: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "北辰区", "津南区", "武清区", "宝坻区", "滨海新区", "静海县", "宁河县", "蓟县"],
    上海: ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区", "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "奉贤区", "崇明县"],
    重庆: ["渝中区", "大渡口区", "江北区", "南岸区", "北碚区", "渝北区", "巴南区", "长寿区", "双桥区", "沙坪坝区", "万盛区", "万州区", "涪陵区", "黔江区", "永川区", "合川区", "江津区", "九龙坡区", "南川区", "綦江县", "潼南县", "荣昌县", "璧山县", "大足县", "铜梁县", "梁平县", "开县", "忠县", "城口县", "垫江县", "武隆县", "丰都县", "奉节县",
      "云阳县", "巫溪县", "巫山县", "石柱土家族自治县", "秀山土家族苗族自治县", "酉阳土家族苗族自治县", "彭水苗族土家族自治县"
    ],
    河北: ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德", "沧州", "廊坊", "衡水"],
    山西: ["太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],
    辽宁: ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],
    吉林: ["长春", "吉林", "四平", "辽源", "通化", "白山", "松原", "白城", "延边朝鲜族自治州"],
    黑龙江: ["哈尔滨", "齐齐哈尔", "鹤岗", "双鸭山", "鸡西", "大庆", "伊春", "牡丹江", "佳木斯", "七台河", "黑河", "绥化", "大兴安岭"],
    江苏: ["南京", "苏州", "无锡", "常州", "镇江", "南通", "泰州", "扬州", "盐城", "连云港", "徐州", "淮安", "宿迁"],
    浙江: ["杭州", "宁波", "温州", "嘉兴", "湖州", "绍兴", "金华", "衢州", "舟山", "台州", "丽水"],
    安徽: ["合肥", "芜湖", "蚌埠", "淮南", "马鞍山", "淮北", "铜陵", "安庆", "黄山", "滁州", "阜阳", "宿州", "巢湖", "六安", "亳州", "池州", "宣城"],
    福建: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"],
    江西: ["南昌", "景德镇", "萍乡", "九江", "新余", "鹰潭", "赣州", "吉安", "宜春", "抚州", "上饶"],
    山东: ["烟台", "日照", "青岛", "淄博", "枣庄", "东营", "潍坊", "济宁", "泰安", "威海", "莱芜", "临沂", "德州", "聊城", "滨州", "菏泽", "济南"],
    河南: ["郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "南阳", "商丘", "信阳", "周口", "驻马店"],
    湖北: ["武汉", "黄石", "十堰", "荆州", "宜昌", "襄樊", "鄂州", "荆门", "孝感", "黄冈", "咸宁", "随州", "恩施"],
    湖南: ["长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "郴州", "永州", "怀化", "娄底", "湘西"],
    广东: ["广州", "深圳", "珠海", "汕头", "韶关", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾", "河源", "阳江", "清远", "东莞", "中山", "潮州", "揭阳", "云浮"],
    海南: ["海口", "三亚"],
    四川: ["成都", "自贡", "攀枝花", "泸州", "德阳", "绵阳", "广元", "遂宁", "内江", "乐山", "南充", "眉山", "宜宾", "广安", "达州", "雅安", "巴中", "资阳", "阿坝", "甘孜", "凉山"],
    贵州: ["贵阳", "六盘水", "遵义", "安顺", "铜仁", "毕节", "黔西南", "黔东南", "黔南"],
    云南: ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
    陕西: ["西安", "铜川", "宝鸡", "咸阳", "渭南", "延安", "汉中", "榆林", "安康", "商洛"],
    甘肃: ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "平凉", "定西", "陇南", "临夏", "甘南"],
    青海: ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西"],
    内蒙古: ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "锡林郭勒盟", "兴安盟", "阿拉善盟"],
    广西: ["南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],
    西藏: ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里"],
    宁夏: ["银川", "石嘴山", "吴忠", "固原", "中卫"],
    新疆维吾尔: ["乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "和田", "阿克苏", "喀什", "克孜勒苏", "巴音郭楞", "昌吉", "博尔塔拉", "伊犁", "塔城", "阿勒泰"],
    香港: ["香港岛", "九龙东", "九龙西", "新界东", "新界西"],
    澳门: ["澳门半岛", "离岛"],
    台湾: ["台北", "高雄", "基隆", "新竹", "台中", "嘉义", "台南市"]
  };
  $(document).ready(function() {
    for (var i = 0; i < pro.length; i++) {
      $option = $("<option/>");
      $option.attr("value", pro[i]);
      $option.text(pro[i]);
      $(".province").append($option);
    }
    $(".province").change(function() {

      var cities = city[$(this).val()];
      $(".city").empty();
      $(".city").append("<option value=''>请选择</option>");
      for (var i = 0; i < cities.length; i++) {
        $option = $("<option/>");
        $option.attr("value", cities[i]);
        $option.text(cities[i]);
        $(".city").append($option);
      }
    });
  });
</script>
</body>
</html>

<!--基础css样式-->
<style>
  html,body,#app{
    width: 100%;
    background-color: black;
  }
  html{
    height: 100%;
  }
  body{
    overflow: auto;height: 100%;
  }
  .footer {
    height: 230px;
    width: 100%;
    background-color: #f5f5f7;
  }
  .el-input__inner{
    border-radius: 15px;
    background-color: black;
    width: 305px;
    height: 30px;
    color: #e9e9e9;
  }
  /*以下报错不用管 以下为修改vue样式*/
  & /deep/ .my-autocomplete {
      width: 57%!important;
    }
  .my-autocomplete li {
    line-height: normal;
    padding: 7px;
    font-size: 10px;
  }
  .my-autocomplete li name{
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .my-autocomplete li addr {
    font-size: 12px;
    color: #b4b4b4;
  }
  .my-autocomplete li highlighted addr{
    color: #ddd;
  }
   /*取消input的上下箭头*/

  .shoppingCart{
    text-align: center;
    display: inline-block;
    background-color: #f5f5f7;
    height: 25px;
    border-radius: 18px;
    border: none;
    color: #1d1d1f;
    width: 45px;
  }
  .shoppingCart1{
    text-align: center;
    display: inline-block;
    background-color: #f5f5f7;
    height: 40px;
    border-radius: 18px;
    width: 50px;
    border: none;
    color: #1d1d1f;
    width: 45px;
  }

  /*输入提示*/
  .hint {
    font-size: 15px;
    display: inline-block;
    font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";
    font-weight: bold;
    color: #3e3e40;
    width: 250px;
  }

  /* 输入框 */
  .inputItem{
    text-align: center;
    padding-left: 5px;
    width: 200px;
    border: none;
    background-color: #f5f5f7;
    color: #3e3e40;
    height: 24px;
    border-radius: 18px;
  }


</style>